<template>
  <div class="root">
    <div class="info">
      <h3>BIT碧涛供销系统</h3>
      <p>
        碧涛供销系统立足于打通供应商和零售商之间的交易渠道，
        平台结合线上+线下模式。
      </p>

      <p>在线上，就和传统的电商模式一样，在平台上进行操作。</p>
      <p>
        而在线下，供应商通过各订单地址，规划路线送货上门，不借助第三方物流公司，零售商再将商品转售给消费者，从中获取利润。
      </p>
    </div>
    <div class="tips">
      <div class="tip-one">线上线下，我全都要</div>
      <div class="tip-two">已经有1个人在使用。</div>
    </div>
    <div class="cards">
      <div class="card-one">
        <div class="tip">
          <span class="text-one">我要成为零售商</span><br />
          <span class="text-two">我要线下出售商品给消费者</span>
        </div>
        <div class="button">
          <el-button type="success" round style="background-color: #2eb0a8" @click="login"
            >马上搜索</el-button
          >
        </div>
      </div>
      <div class="card-two">
        <div class="tip">
          <span class="text-one">我要成为销售商</span><br />
          <span class="text-two">我要线上给零售商供给商品</span>
        </div>
        <div class="button">
          <el-button type="success" round style="background-color: #2eb0a8" @click="login"
            >开始吧</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  methods : {
    login(){
      this.$router.push("/login")
    }
  },
  mounted() {
    $(document).ready(function () {
      $(".tips").animate({ width: "43%" }, 1500);
    });
  },
};
</script>

<style lang="scss" scoped>
$fontFamily: 微软雅黑;

$cardWidth: 43%;
$cardHeight: 50%; //320px

$cardsMarginTop: 2%;

$tipMarginTop: 8%;
$tipMarginLeft: 4%;

$tipsHeight: 17%;
$tipsMarginTop: 1%;
$tipsMarginLeft: 3%;

$tipTwoMarginTop: 0.8%;

$buttonMarginTop: 10%;
$buttonMarginLeft: 4%;

$rootHeight: 600px; //根节点高度
$rootMarginTop: 5.3%;
.root {
  height: $rootHeight;
  margin-top: $rootMarginTop;
  .info {
    margin-left: $tipsMarginLeft;
    top: -5%;
    position: relative;
    p {
      margin-top: 0.5em;
      font: 12px/1.5 "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB",
        "\5b8b\4f53", sans-serif;
      color: #aeaeae;
    }
  }
  //border: 1px solid green;
  .tips {
    width: 0px;
    // border: 1px solid red;
    height: $tipsHeight;
    //overflow: hidden;
    margin-top: $tipsMarginTop;
    margin-left: $tipsMarginLeft;
    //border: 1px solid green;
    .tip-one {
      font-family: $fontFamily;
      white-space: nowrap;
      font-size: 60px;
      color: rgb(51, 51, 51);
      background-color: rgba(255, 255, 255, 0);
      font-weight: 700;
      font-style: normal;
      text-decoration: none;
      letter-spacing: 0px;
      line-height: normal;
      text-shadow: none;
    }
    .tip-two {
      font-family: $fontFamily;
      font-size: 16px;
      color: rgb(51, 51, 51);
      background-color: rgba(255, 255, 255, 0);
      font-weight: 400;
      font-style: normal;
      text-decoration: none;
      letter-spacing: 0px;
      line-height: normal;
      text-shadow: none;
      margin-top: $tipTwoMarginTop;
      white-space: nowrap;
    }
  }
  .cards {
    margin-top: $cardsMarginTop;
    //border: 1px solid green;
    height: 100%;
    .card-one {
      //  border: 1px solid green;
      width: $cardWidth;
      height: $cardHeight;
      display: inline-block;
      background-image: url("/images/1197360018230714648.jpg");
      background-size: 100% 100%;
      .tip {
        margin-top: $tipMarginTop;
        margin-left: $tipMarginLeft;
        .text-one {
          font-family: 微软雅黑;
          font-size: 30px;
          color: rgb(51, 51, 51);
          background-color: rgba(255, 255, 255, 0);
          font-weight: 700;
          font-style: normal;
          text-decoration: none;
          letter-spacing: 0px;
          line-height: normal;
          text-shadow: none;
        }
        .text-two {
          font-family: 微软雅黑;
          font-size: 16px;
          color: rgb(51, 51, 51);
          background-color: rgba(255, 255, 255, 0);
          font-weight: 400;
          font-style: normal;
          text-decoration: none;
          letter-spacing: 0px;
          line-height: 40px;
          text-shadow: none;
        }
      }
      .button {
        margin-top: $buttonMarginTop;
        margin-left: $buttonMarginLeft;
      }
    }
    .card-two {
      //border: 1px solid green;
      width: $cardWidth;
      height: $cardHeight;
      display: inline-block;
      margin-left: 3%;
      background-image: url("/images/1197360018276851992.jpg");
      background-size: 100% 100%;
      .tip {
        margin-top: $tipMarginTop;
        margin-left: $tipMarginLeft;
        .text-one {
          font-family: 微软雅黑;
          font-size: 30px;
          color: rgb(51, 51, 51);
          background-color: rgba(255, 255, 255, 0);
          font-weight: 700;
          font-style: normal;
          text-decoration: none;
          letter-spacing: 0px;
          line-height: normal;
          text-shadow: none;
        }
        .text-two {
          font-family: 微软雅黑;
          font-size: 16px;
          color: rgb(51, 51, 51);
          background-color: rgba(255, 255, 255, 0);
          font-weight: 400;
          font-style: normal;
          text-decoration: none;
          letter-spacing: 0px;
          line-height: 40px;
          text-shadow: none;
        }
      }
      .button {
        margin-top: $buttonMarginTop;
        margin-left: $buttonMarginLeft;
      }
    }
  }
}
</style>